<template>
  <div class="bg_f">
    <div class="wp_head">货物信息</div>
    <div class="good_list">
      <div class="good_item" v-if="goodList.length>0" v-for="(g,index) in goodList" :key="g.name">
        <div class="flex group">
          <span>货物名称</span>
          <p class="ellipsis title">{{g.name}}</p>
        </div>
        <div class="group">
          <span>件数</span>
          <p>{{g.num}}</p>
        </div>
        <div class="group">
          <span>重量(KG)</span>
          <p>{{g.weight}}</p>
        </div>
        <div class="group">
          <span>体积(m³)</span>
          <p>{{g.volume}}</p>
        </div>
        <div class="group">
          <span>包装</span>
          <p class="ellipsis title">{{g.packages}}</p>
        </div>
        <div class="icon_box" v-if="!type" @click="del(index)">
          <icon type="clear" size="16" color="rgba(0,0,0,0.3)"/>
        </div>
        <!-- <div v-if="!type" class="delBtn" @click="del(index)">删除</div> -->
      </div>
      <div v-if="goodList.length==0" class="color9 no_good">请添加货物</div>
    </div>
    <div class="add_good" v-if="!type">
      <button size="mini" @click="showModal" type="primary">添加商品</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodList: Array,
    type: { type: String, default: "" }
  },
  methods: {
    del(n) {
      this.$emit("delGood", n);
    },
    showModal() {
      console.log("点击司机");
      this.$store.dispatch("setModal", true);
    }
  }
};
</script>

<style scoped>
.bg_f {
  background-color: #fff;
  padding: 15px;
  margin: 10px 0;
}

.bg_f .wp_head {
  padding-bottom: 10px;
  font-size: 16px;
}
.add_good {
  text-align: center;
}
.good_list {
}
.good_item {
  /* height: 300px; */
  margin-bottom: 15px;
  position: relative;
}
.group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.group span {
  display: inline-block;
  width: 80px;
  font-size: 14px;
}
.group p {
  flex: 1;
  font-size: 12PX;
}
.no_good {
  padding: 30px 0;
  text-align: center;
}
.icon_box {
  position: absolute;
  right: -10px;
  top: -20px;
  padding: 10px;
}
</style>
